<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="app-1" v-html="rawHtml"></div>

<div id="app-2">
    <p>Original message: "{{message}}"</p>
    <p>Computed reversed message: "{{reversedMessage}}"</p>
</div>

<div id="app-3">
    <button v-on:click="greet">greet</button>
</div>

<div id="app-4">
    <button v-on:click="say('hi')">say hi</button>
    <button v-on:click="say('what')">say what</button>
</div>

</body>
<script>
    var raw = new Vue({
        el: "#app-1",
        data: {
            rawHtml: '<p>你好</p><p>aaa</p>'
        }
    })

    var app2 = new Vue({
        el: "#app-2",
        data: {
            message: "hello"
        },
        computed: {
            reversedMessage: function () {
                return this.message.split("").reverse().join("");
            },
            now : function () {
                return Date.now();
            }
        },
        methods: {
            now2: function () {
                return Date.now();
            }
        }
    })

    var app3 = new Vue({
        el: "#app-3",
        data: {
            name : "Vue.js"
        },
        methods: {
            greet: function (event) {
                alert("hello" + this.name);
                alert(event.target.tagName)
            }
        }
    })

    var app4 = new Vue({
        el: "#app-4",
        methods: {
            say: function (message){
                alert(message);
            }
        }
    })
</script>
</html>